<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

defineProps<{
  title?: string;
}>();

const emit = defineEmits<{
  close: [];
  minimize: [];
  maximize: [];
}>();

const isMaximized = ref(false);
const isActive = ref(true);

// Track window focus state
const handleFocus = () => (isActive.value = true);
const handleBlur = () => (isActive.value = false);

onMounted(() => {
  window.addEventListener("focus", handleFocus);
  window.addEventListener("blur", handleBlur);
});

onUnmounted(() => {
  window.removeEventListener("focus", handleFocus);
  window.removeEventListener("blur", handleBlur);
});

const handleMaximize = () => {
  isMaximized.value = !isMaximized.value;
  emit("maximize");
};
</script>

<template>
  <div
    class="h-6 flex items-center px-4 backdrop-blur transition-colors duration-200 select-none window-drag"
    :class="[
      isActive
        ? 'bg-gray-100/80 border-b border-gray-200'
        : 'bg-gray-100/50 border-b border-gray-100',
    ]"
  >
    <!-- Traffic lights -->
    <div class="flex items-center space-x-1.5 -ml-1 no-drag">
      <div
        @click="emit('close')"
        class="w-3 h-3 rounded-full transition-colors duration-200 flex items-center justify-center group"
        :class="[isActive ? 'bg-red-500 hover:bg-red-600' : 'bg-gray-400']"
      >
        <div
          class="i-mdi-window-close text-[8px] text-red-900 opacity-0 group-hover:opacity-100"
        ></div>
      </div>
      <div
        @click="emit('minimize')"
        class="w-3 h-3 rounded-full transition-colors duration-200 flex items-center justify-center group"
        :class="[isActive ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-gray-400']"
      >
        <div
          class="i-mdi-window-minimize text-[8px] text-yellow-900 opacity-0 group-hover:opacity-100"
        ></div>
      </div>
      <div
        @click="handleMaximize"
        class="w-3 h-3 rounded-full transition-colors duration-200 flex items-center justify-center group"
        :class="[isActive ? 'bg-green-500 hover:bg-green-600' : 'bg-gray-400']"
      >
        <div
          class="text-[8px] text-green-900 opacity-0 group-hover:opacity-100"
          :class="[isMaximized ? 'i-mdi-window-restore' : 'i-mdi-window-maximize']"
        ></div>
      </div>
    </div>

    <!-- Title -->
    <div
      class="flex-1 text-center text-sm font-medium flex items-center justify-center space-x-2 transition-colors duration-200"
      :class="[isActive ? 'text-gray-700' : 'text-gray-500']"
    >
      <div class="i-logos-electron text-lg"></div>
      <span>{{ title }}</span>
    </div>

    <!-- Right side icons -->
    <div class="flex items-center space-x-3 no-drag">
      <div
        v-for="icon in ['i-carbon-search', 'i-carbon-notification', 'i-carbon-settings']"
        :key="icon"
        :class="[
          icon,
          'cursor-pointer transition-colors duration-200',
          isActive ? 'text-gray-500 hover:text-gray-700' : 'text-gray-400',
        ]"
      ></div>
    </div>
  </div>
</template>

<style>
.window-drag {
  -webkit-app-region: drag;
  user-select: none;
}
.no-drag {
  -webkit-app-region: no-drag;
}
</style>
